<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <ul>
    <!--v-for:循环遍历指令，将v-for写在需要重复生成的元素中-->
    <li v-for="name in arr">{{name}}</li>
  </ul>
    <table border="1px">
        <tr>
            <th>编号</th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
        </tr>
        <tr v-for="(item,i) in itemArr">
            <td>{{i+1}}</td>
            <td>{{item.title}}</td>
            <td>{{item.price}}</td>
            <td>{{item.num}}</td>
        </tr>
    </table>
</div>
<script src="../js/vue.js"></script>
<script>
  let v = new Vue({
    el:"body>div",
    data() {
      return {
        arr: ["马超","黄忠","关羽","张飞","赵云"],
          itemArr:[{title:"香蕉",price:"5",num:100},
              {title:"苹果",price:"2",num:200},
              {title:"菠萝",price:"20",num:300}]
      }
    },
  })
</script>
</body>
</html>